<template>
  <div class='ActivityList'>
    <!-- <van-nav-bar
      :title="pageTitle"
      left-arrow
      @click-left="backHome"
    /> -->
    <nav-bar :title="pageTitle"></nav-bar>
    <div class="ActivityList-tab wrap">
           <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
          <a href="javascript:;" @click="skipRouter({path:'/myActivityDetail',query:{activityId:item.activityId}})"
             class="ActivityList-tab-item"
             v-for="(item, index) in dataList"
             :key="index">
            <img :src="imgUrl+item.titleImg" alt="">
            <div class="txt">
              <div class="title van-ellipsis">{{item.title}}</div>
              <div class="user van-ellipsis">
                主办方：<span>{{item.hostunit}}</span>
              </div>
              <div class="location van-ellipsis">
                时  间：<span>{{item.startTime.split(" ")[0]}}</span>
              </div>
              <div class="date van-ellipsis">
                地  址：<span>{{item.address}}</span>
              </div>
            </div>
          </a>
          </van-list>
    </div>
  </div>
</template>

<script>
import navBar from "@/components/NavBar";
export default {
  components: {
    navBar
  },
  name: 'ActivityList',
  data () {
    return {
      imgUrl:config.imgUrl,
      pageTitle:'我报名的活动',
      loading: false,
      finished: false,
      param:{
        page: 0,
        pageSize: 20
      },
      dataList:[]
    }
  },
  methods: {
    backHome () {
      this.$router.back()
    },
    skipRouter(routerObj){
      this.$router.push(routerObj);
    },
    onLoad(){
      this.findList();
    },
    tabsClick(index,title){
      this.pageTitle = title;
    },
    findList(){
      this.param.page++;
      this.$request({
        url: "/activity/selectParticipateInActivities",
        method: "post",
        data: this.param
      }).then(rsp => {
        if (rsp.code === 200) {
          if(this.param.page === 1){
            this.dataList=rsp.data.list;
          }else{
            this.dataList.splice(-1,0,...rsp.data.list);
          }
          
          this.loading = false;
          if(this.dataList.length>=rsp.data.total){
            this.finished = true;
          }else{
            this.finished = false;
          }
        } else {
          this.$toast.fail(rsp.content);
        }
      });
    }
  }
}
</script>

<style lang='scss'>
  @import "../assets/css/base";

  .ActivityList {
    &-swiper{
      &-img{
        width: 100%;
        height: px2rem(330);
      }
    }
    &-tab{
      &-item{
        display: flex;
        margin-top: px2rem(30);
        &>img{
          width: px2rem(295);
          height: px2rem(194);
          border-radius: px2rem(5);
          margin-right: px2rem(28);
        }
        &>.txt{
          display: flex;
          flex-direction: column;
          width:px2rem(360);
          &>.title{
            color: #000000;
            font-size: px2rem(28);
            margin-bottom: px2rem(10);
          }
          &>.user, &>.location, &>.date{
            color: #5A5A5A;
            font-size: px2rem(24);
            line-height: 1.7;
          }
          &>.fire{
            margin-top: px2rem(10);
            @include bgImg(px2rem(150), px2rem(30), '../assets/img/activity/fire.png');
            background-position: left center;
            line-height: px2rem(30);
            padding-left: px2rem(35);
            font-size: px2rem(20);
            color: #ff0000;
          }
        }
      }
    }
    &-more{
      height: px2rem(50);
      width: 100%;
    }
  }
</style>
